<template>
  <div class="card w-100% h-100%">
    <el-row>
      <el-col :span="24">
        <div class="m-b-5">
          <div>
            <el-button v-auth="'add'" type="success" @click="handleAdd()" :icon="Plus">新增</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--searchFrom start-->
    <el-row>
      <el-col :span="24">
        <el-form v-auth="'search'" :inline="true" :model="searchForm">
          <el-form-item label="菜单名称" prop="title">
            <el-input v-model="searchForm.title" placeholder="请输入菜单名称" clearable @keyup.enter="search()"></el-input>
          </el-form-item>
          <!-- <el-form-item label="菜单类型" prop="type">
            <el-select
              style="width: 240px"
              v-model="searchForm.type"
              placeholder="请输入菜单类型"
              clearable
              @keyup.enter="search()"
            >
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="search()" :icon="Search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--searchFrom end-->

    <!--table start-->
    <el-row>
      <el-col :span="24">
        <el-table border :data="tableData" style="width: 100%" row-key="elementId">
          <el-table-column label="菜单标题" prop="title">
            <template #default="scope">
              <el-icon>
                <component :is="scope.row.icon"></component>
              </el-icon>
              <span class="m-l-5">{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" prop="typeName" />
          <el-table-column label="路径/code" prop="path">
            <template #default="scope">
              <span v-if="scope.row.type === '0'">{{ scope.row.path }}</span>
              <span v-else>{{ scope.row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column v-auth="['edit', 'delete', 'add']" label="操作" width="330">
            <template #default="scope">
              <div class="flex justify-end">
                <el-button v-auth="'add'" v-if="scope.row.type === '0'" @click="handleAdd(scope.row)">添加子菜单</el-button>
                <el-button v-auth="'edit'" type="primary" @click="handleEdit(scope.row)":icon="Edit">编辑</el-button>
                <el-button v-auth="'delete'" type="danger" @click="handleDelete(scope.row)" :icon="Delete">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--table end-->
    <editElement ref="editElementRef" @confirm="search" />
  </div>
</template>
<script setup>
defineOptions({
  name: 'element',
});
import { ref, onMounted } from "vue";
import { getElements, deleteElement } from "@/api/modules/element";
import { ElMessage, ElMessageBox } from "element-plus";
import editElement from "./editElement.vue";
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'
//searchFrom data and methods start
const searchForm = ref({
  title: "",
  type: ""
});
// const typeOptions = ref([
//   {
//     label: "菜单",
//     value: "0"
//   },
//   {
//     label: "按钮",
//     value: "1"
//   }
// ]);
//searchFrom data and methods end

//table data and methods start
const tableData = ref([]);
const search = () => {
  getElements(searchForm.value).then(res => {
    tableData.value = res.data;
  });
};

const editElementRef = ref(null);
const handleEdit = row => {
  editElementRef.value.openDialog(row.elementId);
};
const handleDelete = row => {
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteElement(row.elementId).then(res => {
      if (res.code === 200) {
        ElMessage.success("删除成功！");
        search();
      }
    });
  });
};
const handleAdd = row => {
  editElementRef.value.openDialog();
  if (row) {
    editElementRef.value.setpid(row.elementId);
  }
};
onMounted(() => {
  search();
});
//table data and methods end
</script>
